
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
     <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <style>
    #fenquTab tbody tr:nth-child(odd){background:#f7f3f7 }
        .ren{
    display: inline-block;
    background:#d0e0e0;
    border:1px solid #ccc;
    border-radius:5px;
    margin-right:2px;
    color:#333;
    line-height: 20px;
    height:20px;
    font-size: 12px;
    padding-left:5px;
    padding-right:5px;
}
    </style>
</head>

<body style="color:#333;padding:3px;">
    <!-- 标题 -->
    <div class="page-heade">
      <h2 class="title_color text-center">分区目标达成报表</h2>
    </div>
    <!-- 标题 -->
    <div>
    <form action="#" method="post" id="form_check" class="form-inline">
    <input type="hidden" name="zid" id="zid"/>
      <table class="row-margin-top tab-content table-bordered  table" border="1">
          <tr>
          <td style="min-width: 120px;width: 120px"><label for="" class="form-label">财年</label></td>
          <td> <select name="cid" id="cid" class="form-control">
              {volist name="cainian" id="c"}
                <option value="{$c.id}" {if $cid==$c.id} selected {/if}>{$c.title}</option>
              {/volist} 
           </select></td>
            </tr>
            <tr>
          <td style="min-width: 120px;width: 120px"><label for="" class="form-label">维度</label></td>
             <td>
                 <label class="radio-inline">
                    <input type="radio"  checked id="agency" value="option2" checked>分区
                  </label><br>
                <div class="col-xs-8">
                        <div class="input-group" id="" >
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="fenqu"  value="">
                           
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
             </td>
            </tr>
            <tr>
            <td style="min-width: 120px;width: 120px"></td>
             <td id="selected_fenqu">
              {volist name="zarr" id="z"}
                <span class="ren netlist" data-id="{$z.id}">{$z.title}<span class="close">×</span></span>
              {/volist}
            </td>
            </tr>
           <tr>
            <td class="text-center" colspan="2">
              <button class="btn btn-info query">查询</button>
              <button class="btn btn-info emptyIf" type="button">清空</button>
              <button class="btn btn-info LendExcel" type="button">导出Excel</button>
            </td>
            </tr>
      </table>
      <table class="table table-bordered table-hover text-right bud_hei">
          <tr class="info">
            <th class="text-center">分区名称</th>
            <th class="text-center">&nbsp;</th>
            {volist name="kaohe1" id="k1"}
            <th class="text-center">{$k1.title}</th>
            {/volist}
            <th class="text-center">合计</th>
          </tr>
          <tbody>
          {volist name="zarr" id="j"}
          <tr>
        <td class="text-center" rowspan="7">{$j.title}</td>
        <td class="text-center">预计销售目标(元)</td>
        {volist name="$j.yjxl" id="xl"}
        <td class="ObjectNum">{$xl}</td>
        {/volist}
        <td class="ObjectNum trTotal">{$j.zyjxl}</td>
      </tr>
      <tr>
        <td class="text-center">预计费用预算(元)</td>
        {volist name="$j.yjfy" id="xl"}
        <td class="ObjectNum">{$xl}</td>
        {/volist}
        <td class="ObjectNum trTotal">{$j.zyjfy}</td>
      </tr>
      <tr>
        <td class="text-center">实际销售达成(元)</td>
        {volist name="$j.xldc" id="xl"}
        <td class="ObjectNum">{$xl}</td>
        {/volist}
        <td class="ObjectNum trTotal">{$j.zxldc}</td>
      </tr>
      <tr>
        <td class="text-center">实际费用申请(元)</td>
        {volist name="$j.fysq" id="xl"}
        <td class="ObjectNum">{$xl}</td>
        {/volist}
        <td class="ObjectNum trTotal">{$j.zfysq}</td>
      </tr>
      <tr>
        <td class="text-center">预计费用率</td>
         {volist name="$j.yjfyl" id="xl"}
        <td >{$xl}%</td>
        {/volist}
        <td class="trTotal">{$j.zyjfyl}%</td>
      </tr>
       <tr>
        <td class="text-center">实际费用率</td>
         {volist name="$j.sjfyl" id="xl"}
        <td>{$xl}%</td>
        {/volist}
        <td class="trTotal">{$j.zsjfyl}%</td>
      </tr>
       <tr>
        <td class="text-center">实际达成率</td>
         {volist name="$j.dcl" id="xl"}
        <td>{if $xl=='-'} - {else/} {$xl} %{/if}</td>
        {/volist}
        <td class="trTotal">{if $j.zdcl=='-'} - {else/} {$j.zdcl} %{/if}</td>
      </tr>
          {/volist}
      
          </tbody>
      </table>
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
     <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
      <script src="__STATIC__/layout/js/common.js"></script>
       <script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script>
    $(".LendExcel").click(function(){
      var jarr=[];var i=0;
      $(".ren").each(function(){
        jarr[i]=$(this).attr("data-id");i++;
      })
      var jid=0;
      if(jarr.length>0){
         jid=jarr.join('-')
      }
      var cid=$("#cid").val();
      window.open("{:url('fenqumbout')}?cid="+cid+"&zid="+jid)
    })
     $(".emptyIf").click(function(){
        location.href="{:url('fenqumb')}"
      })
    $(document).on("click",".close",function(){
          $(this).parent().remove();
       })
    $(".query").click(function(){
      
      var jarr=[];var i=0;
      $(".ren").each(function(){
        jarr[i]=$(this).attr("data-id");i++;
      })
      var jid=0;
      if(jarr.length>0){
        var jid=jarr.join(',')
      }
      $("#zid").val(jid);
      document.getElementById("form_check").submit();
    })
           //产品网点搜索自动补全
    $("#fenqu").bsSuggest({
        url: "{:url('select/fenqujson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_fenqu .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_fenqu').append('<span class="ren netlist" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
       $(document).ready(function(){
            var $ObjectNum =$(".ObjectNum");
               toNum($ObjectNum);

                var trC= $("#fenquTab tbody tr");
        trC.each(function(){
         var trTdlen= $(this).find('td').length;
      
         if(trTdlen==7){
            $(this).find("td").eq(0).css("background-color","#e7f7ff");
          
         }
        })
             });

    </script>
</body>

</html>
